<template>
    <div class="box-column container-grid">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData }"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
                <template v-slot:facethumb="{ row }">
                    <el-image style="width: 40px; height: 40px" :src="row.face_thumb" fit="contain"
                        v-if="row.face_thumb !== ''" :preview-src-list="[row.face_thumb]"></el-image>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes" :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
        <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
        <appAuthForm ref="appAuthForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></appAuthForm>
        <importForm ref="importForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></importForm>
        <scripForm ref="scripForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></scripForm>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, State } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableHeader } from '@/mixin/table/Header';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinAccess } from '@/mixin/Access';
import dialogForm from './Edit.vue';
import appAuthForm from './Appauth.vue';
import scripForm from './Scrip.vue';
import importForm from './Fimport.vue';

@Component({
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        dialogForm,
        appAuthForm,
        importForm,
        scripForm
    }
})
export default class parkTenantTable extends Vue {
    @Action('parkTenant/del') itemDel: any;
    @Action('parkTenant/list') getList: any;
    @State((state) => state.sharing.func) funcData: any;
    table: any = {
        btns: [
            {
                label: '编辑',
                condition: ['permissionsData.edit'],
                handleClick: (this as any).onEditClick
            },
            {
                label: '授权门禁',
                param: 'scripForm',
                condition: [
                    'permissionsData.doorScrip',
                    function ({ row }) {
                        return row.door_duration == '';
                    }
                ],
                handleClick: (this as any).onEditClick
            },
            {
                label: '授权门禁',
                 condition: [
                    function ({ row }) {
                        return row.door_duration !== '';
                    }
                 ],
                handleClick: this.onInfoClick
            },
            {
                label: '重置密码',
                param: 'appAuthForm',
                condition: ['permissionsData.appauth'],
                handleClick: (this as any).onEditClick
            },
            {
                label: '删除',
                condition: [
                    'permissionsData.del'
                ],
                handleClick: (this as any).onDelClick
            }
        ],
        columns: [
            {
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                width: 80,
                title: '人员编号',
                field: 'member_id',
                formatter: function ({ cellValue }) {
                    return '1' + cellValue;
                }
            },
            {
                width: 110,
                title: '手机号',
                field: 'phone'
            },
            {
                width: 120,
                title: '姓名',
                field: 'member_xm'
            },
            {
                title: '性别',
                width: 70,
                field: 'member_xb',
                params: 'sexData',
                formatter: (this as any).formatterData
            },
            {
                title: '归属组织',
                width: 150,
                field: 'section_name'
            },
            {
                title: '卡号',
                field: 'door_card'
            },
            {
                title: '密码',
                field: 'door_pwd'
            },
            {
                title: '二维码',
                width: 70,
                field: 'door_qrcode',
                params: 'funcData',
                formatter: (this as any).formatterData,
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.door_qrcode];
                }
            },
            {
                title: '人脸',
                width: 70,
                slots: { default: 'facethumb' },
                field: 'face_thumb'
            },
            {

                title: '门禁失效时间',
                width: 150,
                field: 'door_duration',
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.door_duration !== '' ? 1 : 2];
                }
            },
            {
                title: '梯控失效时间',
                field: 'ladder_duration',
                formatter: function ({ cellValue }) {
                    return cellValue ; // ? '已授权' : '未授权';
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.ladder_duration !== '' ? 1 : 2];
                }
            },
            {
                width: 150,
                title: '创建时间',
                field: 'created_at'
            },
            {
                showOverflow: 'ellipsis',
                fixed: 'right',
                slots: { default: 'operate' },
                title: '操作',
                field: 'operate',
                width: 260
            }
        ]
    };

    @State((state) => state.sharing.sex) sexData: any;

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: 'phone',
                label: '手机号'
            },
            {
                field: 'member_xm',
                label: '姓名'
            }
        ],
        btns: [
            {
                label: '新增',
                class: 'btn-blue',
                icon: 'el-icon-plus',
                condition: ['permissionsData.add'],
                handleClick: (this as any).onAddClick
            },
            {
                label: '导入',
                class: 'btn-blue',
                icon: 'el-icon-plus',
                condition: [
                    'permissionsData.import'
                ],
                param: 'importForm',
                handleClick: (this as any).onEditClick
            },
            {
                label: '导出',
                class: 'btn-blue',
                icon: 'el-icon-download',
                condition: ['permissionsData.export'],
                handleClick: (this as any).onExportClick
            }
        ]
    };


    onInfoClick({ row }) {
            row.scrip_sn = row.member_sn;
            row.door_end_time =row.door_duration;
            row.from = 1;
            (this as any).go(
                'scripAuthDoorTable',
                {
                    id: row.member_sn,
                    isEdit: true,
                    data: row
                },
                { isBase: true }
            );
    }
    @Action('parkTenant/downloadFile') downloadAction: any;
    // 导出
    onExportClick() {
        const me = this as any;
        const params = me.dataStore.getParams();
        me.download(params);
    }
}
</script>
